<template>
    <div class="Record">
        <div style="margin: 10px 10px">
            <el-input style="width: 200px" placeholder="请输入用户编号" suffix-icon="el-icon-search" v-model="userid"></el-input>
            <el-button class="ml-5" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
            <el-button type="warning" @click="reset"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
        <div  style="margin: 10px 0" class="delBatch">
            <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
                icon-color="red" title="您确定批量删除这些数据吗？" @confirm="delBatch">
                <el-button type="danger" slot="reference">
                    批量删除
                    <i class="el-icon-remove-outline"></i>
                </el-button>
            </el-popconfirm>
        </div>
<el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
@selection-change="handleSelectChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="userid" label="用户编号" width="100" align="center"></el-table-column>
<el-table-column prop="startdate" label="检测起始日期" width="200" align="center"></el-table-column>
<el-table-column prop="enddate" label="检测结束日期" width="200" align="center"></el-table-column>
<el-table-column prop="electricity" label="电量下降趋势指标" width="200" align="center"></el-table-column>
<el-table-column prop="lineloss" label="线损指标" width="200" align="center"></el-table-column>
<el-table-column prop="warn" label="告警类指标" width="200" align="center"></el-table-column>
<el-table-column prop="result" label="识别结果" width="200" align="center"></el-table-column>
<el-table-column label="操作" width="160" align="center">
    <template slot-scope="scope">
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
            icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)">
            <el-button type="danger" slot="reference">
                删除
                <i class="el-icon-remove-outline"></i>
            </el-button>
        </el-popconfirm>
    </template>
</el-table-column>
</el-table>
<div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[10, 15, 20, 25]" :page-size="pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
</div>
</template>
<script>

import request from '@/utils/request'
export default {
    name: "RecordManage",
    data() {
        return {
            user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},//获取用户登录之后后端返回的dto，其中有role
            tableData: [],//存放后端发送来的数据
            multipeSelection: [],
            userid:'',
            total: '',//条目总数
            pageNum: 1,//当前页
           pageSize: 10,//每页显示条目
           }
        },
    created() {
        // 每次页面渲染时请求分页查询
        this.load()
    },
    methods: {
        load() {
            this.request.get("/predict/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize:this.pageSize,
                    userid: this.userid
                }
            }).then(res => {  //向后端发送GET请求，请求分页查询之后，后端的Service接口会调用Mybatis-plus的IService接口中封装好的Page函数（专门用来分页查询的函数）
                console.log(res)
                //然后这个Page函数会根据条件构造器queryWrapper构造的条件进行分页查询，返回一个分页对象，包含了records和total
                //它俩一起作为后端返回给前端的result对象的data部分，要注意这里res.data才是后端返回的Result对象
                this.tableData = res.data.data.records,//所有分页查询函数都要接收后端返回的records属性和total属性
                console.log(res.data.data.records)
                //在后端代码中，​recordService.page(new Page<>(pageNum, pageSize), queryWrapper)​方法返回的结果是一个分页对象，
                //包含了当前页的记录列表以及总记录数等信息。当前端发送请求并获取到后端返回的数据后，
                //前端需要从返回的数据中提取出分页对象中的记录列表和总记录数来展示在页面上，
                this.total = res.data.data.total  //records属性是当前页数据记录列表，total是总记录数
                console.log(res.data.data)
            })
        },
        handleSelectChange(val) {
            this.multipeSelection = val
        },
        handleSizeChange(pageSize) {
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        del(id) {
            if(this.user.role=='管理员'){//只有管理员才能删除
            this.request.delete("/predict/" + id).then(res => {
                if (res.data.code === '200') {
                    this.$message.success("删除成功")
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        }
        else{
            this.$message.error("无权限")
        }
        },
        delBatch() {
            if(this.user.role=='管理员'){//只有管理员才能删除
            let ids = this.multipeSelection.map(v => v.id)  
            this.request.post("/predict/del/batch", ids).then(res => {
                if (res.data.code === '200') {
                    this.$message.success("批量删除成功")
                    this.load()
                } else {
                    this.$message.error("批量删除失败")
                }
            })
                }
            else{
                this.$message.error("无权限")
            }
        },
        reset() {
            this.userid ='',
            this.load()
        },
    }
    }
</script>  


<style>
.headerBg {
    background: #eee !important;
}
.delBatch{
    position: absolute;
    right: 20px;
    top: -10px;
}
.Record{
    position: relative;
    top: 10px;
}
</style>